function DlgFont() {

  this.show = (conf) => {

    let cfg = {
      container: 'body',
      family: '幼圆',
      style: '粗斜体',
      size: '16',
      okHandler: null
    }

    let $DOM = $(`<div class="notepad-dlg-font"></div>`);

    // 更新结构
    $.extend(cfg, conf);

    // notepad-dlg-font
    $(cfg.container).append($DOM);

    // dlalogbox
    let $dlalogbox = $(`<div class="dlalogbox"></div>`);
    $DOM.append($dlalogbox);

    // titlebar
    let $titleBar = $(`
    <div class="titlebar">
      <p class="title">字体</p>
      <span class="close-btn"> ✖ </span>
    </div>
    `);
    $dlalogbox.append($titleBar);

    // 对话框可以拖动
    $dlalogbox.draggable({handle:$titleBar});

    //关闭对话框事件
    const destoryDla = () => {
      $('.notepad-dlg-font').remove();
    }

    // 点击x，关闭事件
    $('.notepad-dlg-font .close-btn').click(() => destoryDla())

    // main
    let $main = $(`<div class="main"></div>`)
    $dlalogbox.append($main)

    // main-changestyle 字体字形大小改变之处
    let $changestyle = $(`<div class="main-changestyle"></div>`)
    $main.append($changestyle)

    // 字体
    let $fontFamily = $(`<div class="main-fontFamily"></div>`)
    $changestyle.append($fontFamily);
    let list1 = new CreateList();
    list1.show({
      width: '180px', //列表的宽度
      height: '125px', //列表的高度
      list: fontFamily, //渲染的列表
      title: '字体(F):', //标题
      selected: localStorage.getItem('font')?JSON.parse(localStorage.getItem('font')).family:cfg.family, //选择项
      container: '.main-fontFamily', //dom结构放置处
      selectHandler: function (e) {
        cfg.family = e.target.innerHTML;
        sample()
        return e.target.innerHTML;
      }, //点击后的事件
    });
   
    // 字形
    let $fontStyle = $('<div class="main-fontStyle"></div>')
    $changestyle.append($fontStyle);
    let list2 = new CreateList();
    list2.show({
      width: '120px',
      height: '125px',
      list: fontStyle,
      title: '字形(Y):',
      selected: localStorage.getItem('font')?JSON.parse(localStorage.getItem('font')).style:cfg.style,
      container: '.main-fontStyle',
      selectHandler: function (e) {
        cfg.style = e.target.innerHTML;
        sample()
        return e.target.innerHTML;
      }, //点击后的事件
    });

    // 大小
    let $fontSize = $(`<div class="main-fontSize"></div>`)
    $changestyle.append($fontSize);
    let list3 = new CreateList();
    list3.show({
      width: '90px', //列表的宽度
      height: '125px', //列表的高度
      list: fontSize, //渲染的列表
      title: '大小(S):', //标题
      selected: localStorage.getItem('font')?JSON.parse(localStorage.getItem('font')).size:cfg.size, //选择项
      container: '.main-fontSize', //dom结构放置处
      selectHandler: function (e) {
        cfg.size = e.target.innerHTML;
        sample()
        return e.target.innerHTML;
      }, //点击后的事件
    })

    // 示例
    let $example = $(`
    <div class="main-example">
      <div class="example-text">示例</div>
      <div class="example-area"></div>
    </div>
    `);
    $main.append($example)

    // 改变示例中的样式
    let sample = () => {
      $exampleArea.css({
        fontFamily: cfg.family,
        fontSize: cfg.size + 'px',
        fontStyle: cfg.style.indexOf('斜') != -1 ? 'italic' : 'normal',
        fontWeight: cfg.style.indexOf('粗') != -1 ? 'bolder' : 'normal',
      })
    }

    let $exampleArea = $example.find('.example-area');
    $exampleArea.html('AaBbYyZz');
    sample();

    // 脚本
    let $scriptArea = $(`
    <div class="script-area">
      <div class="script-title">脚本(R):</div>
      <select id="language_select">
        <option value="1">西欧语言</option>
        <option value="2">希腊语</option>
      </select>
    </div>
    `);
    $main.append($scriptArea);

    // 显示更多字体
    let $moreFonts = $(`<a href="#" class="main-fonts">显示更多字体</a>`);
    $main.append($moreFonts)

    // 按钮
    let $btn = $(`
    <div class="main-button">
      <input type="button" value="确定" class="btn-sure">
      <input type="button" value="取消" class="btn-cancel">
    </div>
    `);
    $main.append($btn);

    // 点击取消按钮，关闭对话框
    $('.notepad-dlg-font .btn-cancel').click(() => destoryDla())

    // 点击确定按钮，传出字体样式
    $('.notepad-dlg-font .btn-sure').click(()=>{
      localStorage.setItem('font',JSON.stringify(cfg))
      $editor.setFont(cfg)
      destoryDla();
    })

  }

  return;
}
